<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 管理系统大布局 - Layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body style="">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">高校健康云监控系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    <span th:text=" ${session.user.username}">
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">Your Profile</a></dd>
                    <dd><a href="">Settings</a></dd>
                    <dd><a href="/api/logout">登出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">健康数据</a>
                    <dl class="layui-nav-child">
                        <dd  class="layui-nav-item leftdaohang" mytitle="数据报表显示" data-url="/api/getPage?pageName=report/list"><a >数据报表显示</a></dd>
                        <dd  class="layui-nav-item leftdaohang" mytitle="Echarts显示" data-url="/api/getPage?pageName=report/data"><a >Echarts显示</a></dd>
                        <dd  class="layui-nav-item leftdaohang" mytitle="数据采集" data-url="/report/add"><a >数据采集</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a th:if="${session.user.username} eq 'admin'" href="javascript:;" >用户管理</a>
                       <dl class="layui-nav-child">
                        <dd  class="layui-nav-item leftdaohang" mytitle="用户数据显示"   data-url="/api/getPage?pageName=user/list"><a >用户数据显示</a></dd>
                          </dl>
                </li>
                    <li class="layui-nav-item leftdaohang"  th:if="${session.user.username} eq 'admin'" data-url="/api/getPage?pageName=log/list" mytitle="日志监控"><a>日志监控</a></li>

            </ul>
        </div>
    </div>

    <!--3.右侧主体内容区-->
    <div class="layui-body" >
        <!--tabs标签-->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
            <ul class="layui-tab-title"></ul>
            <div class="layui-tab-content" style="height:100%;">
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <h2 style="text-align:center;font-weight:bold;">广东科学技术职业学院</h2>
    </div>
</div>
<script src="/layui/layui.js"></script>
<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                var htmlurl=$(this).attr('data-url');
                var mytitle=$(this).attr('mytitle');
//                  alert("触发tab增加事件："+mytitle);
                //先判断是否已经有了tab
                var arrayObj = new Array();　//创建一个数组
                $(".layui-tab-title").find('li').each(function() {
                    var y = $(this).attr("lay-id");
                    arrayObj.push(y);
                });
//                    alert("遍历取到的数组："+arrayObj);
                var have=$.inArray(mytitle, arrayObj);  //返回 3,
                if (have>=0) {
                    //tab已有标签
//                        alert("遍历的已有标签："+mytitle);
                    element.tabChange('demo', mytitle); //切换到当前点击的页面
                } else{
                    //没有相同tab
//                      alert("遍历的没有相同tab："+mytitle);
                    element.tabAdd('demo', {
                        title:mytitle //用于演示
                        ,content: '<iframe style="width:100%;height: 700px;" frameborder="no" scrolling="yes"  src='+htmlurl+' ></iframe>'
                        ,id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                    element.tabChange('demo', mytitle); //切换到当前点击的页面
                }
            }

        };
        $(".leftdaohang").click(function(){
            var type="tabAdd";
            var othis = $(this);

            active[type] ? active[type].call(this, othis) : '';
        });

    });

   
</script>
</body>
</html>